ReportPage = function(){
	var page = this;
	this.carousel = new Ext.Carousel({
		id: 'report_main',
		defaults: {
            cls: 'card reports'
        },
		scroll: 'vertical',
		autoHeight: true,
	});
	this.tbar = new Ext.Toolbar({
		id: 'report_toolbar',
		xtype: 'toolbar',
		title: 'Reports',
        ui: 'light',
		dock: 'top',
	});
	
	ReportPage.superclass.constructor.call(this, {
		id: 'report_main',
		dockedItems: this.tbar,
		// fullscreen: true,
		layout: 'fit',
		items: this.carousel
	});
};

Ext.extend(ReportPage, Ext.Panel, {
	requestReports: function(){
		var page = this;
		showMask({message:'Loading..', cls : 'waiting-mask'});
		Ext.Ajax.request({
            url: "/cat/get_reports",
            success: function(response){
                json = Ext.util.JSON.decode(response.responseText);
                if (!json.success) {
                	Ext.Msg.alert('Error!!', json.message, Ext.emptyFn);
					hideMask();
					return;
                }
				page.updateReports(json.data.reports);
				hideMask();
            },
			failure: function(){
				Ext.Msg.alert('Error!!', 'Network Error!!', Ext.emptyFn);
				hideMask();
			}
        });
	},
	updateReports: function(reports){
		var i = 0;
		this.carousel.removeAll();
		for(; i < reports.length; i++){
			this.carousel.add(new Ext.Panel({html: reports[i].report, cls: 'card'}));
		}
		this.carousel.add(new Ext.Panel({id:'placeholder'}));
		if(i > 0){
			this.carousel.doLayout();
			this.carousel.setActiveItem(0, 'fade');
		}
	}
});